<template>
	<l-page :page.sync="queryParams.pageNum" :page-size.sync="queryParams.pageSize" :total="total" @getList="getList">
		<el-form ref="queryForm" slot="header" :inline="true" :model="queryParams" label-width="75px">
			<el-form-item label="用户名称:" prop="userName">
				<el-input v-model.trim="queryParams.userName" clearable placeholder="请输入用户名称" @keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="IP地址:" prop="ipaddr">
				<el-input v-model.trim="queryParams.ipaddr" clearable placeholder="请输入IP地址" @keyup.enter.native="handleQuery" />
			</el-form-item>
			<start-end-time ref="child" :get-time="getTime" title="登录时间:"></start-end-time>
		</el-form>

		<template slot="options">
			<l-search @search="handleQuery" @refresh="resetQuery" />
			<el-button v-hasPermi="['monitor:logininfor:export']" type="primary" @click="handleExport">
				<svg-icon icon-class="export" size="16px"></svg-icon>
				导出
			</el-button>
		</template>

		<el-table v-loading="loading" :data="list" stripe @selection-change="handleSelectionChange">
			<el-table-column align="center" label="序号" type="index" width="55" />
			<el-table-column align="center" label="用户名称" prop="userName" />
			<el-table-column :show-overflow-tooltip="true" align="center" label="IP地址" prop="ipaddr" width="130" />
			<el-table-column align="center" label="浏览器" prop="browser" />
			<el-table-column align="center" label="操作系统" prop="os" />
			<el-table-column :formatter="statusFormat" align="center" label="登录状态" prop="status" />
			<el-table-column align="center" label="操作信息" prop="msg" />
			<el-table-column align="center" label="登录时间" prop="loginTime" width="180">
				<template slot-scope="scope">
					<div class="w-full flex flex-col items-center">
						<span>{{ dayjs(scope.row.loginTime).format('YYYY-MM-DD') }}</span>
						<span>{{ dayjs(scope.row.loginTime).format('HH:mm:ss') }}</span>
					</div>
				</template>
			</el-table-column>
		</el-table>
	</l-page>
</template>

<script>
import { cleanLogininfor, delLogininfor, exportLogininfor, list } from '@/api/monitor/logininfor';
import startEndTime from '@/components/StartEndTime';
import tableMixins from '@/mixins/table';
export default {
	name: 'Footslogging',
	components: { startEndTime },
	mixins: [tableMixins],
	data() {
		return {
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 表格数据
			list: [],
			// 状态数据字典
			statusOptions: [],
			// 日期范围
			dateRange: [],
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				ipaddr: undefined,
				userName: undefined,
				status: undefined,
			},
		};
	},
	created() {
		this.getList();
		this.getDicts('sys_common_status').then((response) => {
			this.statusOptions = response.data;
		});
	},
	methods: {
		/** 查询登录日志列表 */
		getList() {
			this.loading = true;
			list(this.addDateRange(this.queryParams, this.dateRange)).then((response) => {
				this.list = response.rows;
				this.total = response.total;
				this.loading = false;
			});
		},
		// 登录状态字典翻译
		statusFormat(row, column) {
			return this.selectDictLabel(this.statusOptions, row.status);
		},
		//获取时间
		getTime(startTime, endTime) {
			this.$set(this.dateRange, 0, startTime);
			this.$set(this.dateRange, 1, endTime);
		},

		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.dateRange = [];
			this.$refs.child.resetTime(); //清空时间
			this.resetForm('queryForm');
			this.handleQuery();
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map((item) => item.infoId);
			this.multiple = !selection.length;
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const infoIds = row.infoId || this.ids;
			this.$confirm('是否确认删除访问编号为"' + infoIds + '"的数据项?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return delLogininfor(infoIds);
				})
				.then(() => {
					this.getList();
					this.msgSuccess('删除成功');
				});
		},
		/** 清空按钮操作 */
		handleClean() {
			this.$confirm('是否确认清空所有登录日志数据项?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return cleanLogininfor();
				})
				.then(() => {
					this.getList();
					this.msgSuccess('清空成功');
				});
		},
		/** 导出按钮操作 */
		handleExport() {
			const queryParams = this.queryParams;
			this.$confirm('是否确认导出所有操作日志数据项?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return exportLogininfor(queryParams);
				})
				.then((response) => {
					this.download(response.msg);
				});
		},
	},
};
</script>
